﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleTreeStudy.aspx.cs" Inherits="MyAjax.SimpleTreeStudy" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>区域选择</title>
    <link rel="stylesheet" href="Scripts/simpletree/jquery.simple.tree.css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/simpletree/jquery.simple.tree.js"></script>
    <script type="text/javascript">
        var simpleTreeCollection;
        $(document).ready(function () {
            simpleTreeCollection = $('.simpleTree').simpleTree({
                autoclose: true,
                afterClick: function (node) {
                    alert("您选择了：" + $('span:first', node).text() + "id为：" + $('span:first', node).attr("id").substr(2)); //此处为何要“.substr(2)”，是因为特殊原因，稍后可以得到解释.如果你仅仅需要取文字，这里可以不取ID。                
                },
                afterDblClick: function (node) {
                    //alert("text-"+$('span:first',node).text());//双击事件
                },
                afterMove: function (destination, source, pos) {
                    //alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);//拖拽事件
                },
                afterAjax: function () {
                    //alert('Loaded');
                },
                animate: true
                //,docToFolderConvert:true
            });
        });
    </script>
</head>
<body>
<ul class="simpleTree">
    <li class="root"><span>区域选择</span>
        <ul>            
            <li id="root0"><span id="ssss">中国</span>
                <ul class="ajax">
                    <li id='0'>{url:SubTreeHandler.ashx?nodeid=0}</li>
                </ul>
            </li>  
                      
        </ul>
    </li>
</ul>

<input type="button" id="getSelectedCheckbox" value="SelectedCheckbox"/>
<script type="text/javascript">
    $(document).ready(function () {
        $("#getSelectedCheckbox").click(function () {
            $.each($("input", ".simpleTree"), function (index, value) {

                if (value["checked"] == true) {
                    alert(value["id"]);
                } /*
				alert(value["checked"]);*/
            });
            //alert(l);
        });
    });
</script>
</body>
</html>